<template>
	<!-- 个人返点明细 -->
	<div v-loading="rebateLoading" element-loading-spinner="el-icon-loading">
		<RebateDetailTable
			:tableData="clubRebateList"
			:isTexas="true"
			from="personalRebateDetails"
		/>
		<RebateDetailTable
			v-if="insureRebateList.length > 0"
			:tableData="insureRebateList"
			:isInsure="true"
		/>
		<RebateDetailTable :tableData="otherRebateList" />
	</div>
</template>

<script>
import list from '@/mixins/list'
import RebateDetailTable from './components/RebateDetailTable'
export default {
	components: { RebateDetailTable },
	mixins: [list],
	props: {
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			rebateLoading: false,
			clubRebateList: [],
			insureRebateList: [],
			otherRebateList: []
		}
	},
	watch: {
		// detailData: {
		// 	handler(val) {
		// 		if (val.proxyId) {
		// 			this.getTeamAndMemberRebateList()
		// 		}
		// 	},
		// 	immediate: true
		// }
	},
	created() {
		if (this.detailData?.proxyId) {
			this.getTeamAndMemberRebateList()
		}
	},
	methods: {
		// 获取团队返点明细/直属会员贡献明细
		getTeamAndMemberRebateList() {
			this.rebateLoading = true
			const param = {
				id: this.detailData.proxyId,
				reportType: this.detailData.reportType,
				reportDate: this.detailData.reportDate
			}
			this.$api
				.getTeamRebateDetailApi(param)
				.then((res) => {
					const { code, data } = res
					this.rebateLoading = false
					if (code === 200) {
						this.clubRebateList = []
						this.insureRebateList = []
						this.otherRebateList = []
						if (Array.isArray(data)) {
							data.forEach((item) => {
								if (
									item.venueName === '德州-俱乐部' ||
									item.venueName === '德州-俱乐部服务费'
								) {
									this.clubRebateList.push(item)
								} else if (item.venueName === '德州-保险') {
									this.insureRebateList.push(item)
								} else {
									this.otherRebateList.push(item)
								}
							})
						}
					}
				})
				.catch(() => {
					this.rebateLoading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
}
.block {
	padding: 20px 40px 20px 40px;
	.block-content {
		position: relative;
		width: 100%;
		margin-top: 10px;
		word-break: break-all;
	}
}
</style>
